<script type="text/html" template>
  <link rel="stylesheet" href="{{ layui.setter.paths.core }}css/login.css?v={{ layui.admin.v }}" media="all">
</script>

<style>
  /* 覆盖原框架样式 */
  .layui-elem-quote {
    background-color: inherit !important;
  }

  .layui-input,
  .layui-select,
  .layui-textarea {
    background-color: inherit;
    padding-left: 30px;
  }

  /*header*/
  .header_box {
    height: 80px;
    line-height: 80px;
    border-bottom: 1px solid #e8ebf2;
  }

  .header {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    height: 100%;
  }

  .header h1 {
    display: inline-block;
    padding-left: 35px;
  }

  .header .nav {
    font-size: 14px;
    text-align: right;
    display: inline-block;
    vertical-align: top;
    float: right;
  }

  .header .nav a {
    color: #010101 !important;
    display: inline-block;
    padding: 0 35px;
  }

  .header .nav a.active {
    color: #ab8e75 !important;
  }

  .app-header {
    display: none;
  }

  .app-header-menuicon {
    display: block;
    position: absolute;
    top: 0;
    width: 80px;
    height: 80px;
    cursor: pointer;
    text-align: center;
  }

  .app-header-menuicon i {
    font-size: 30px;
  }

  .header-down-nav {
    display: none;
  }

  /*end-header*/
</style>

<div class="layui-fluid">
  <div class="layui-container">
    <div class="layui-row">
      <div class="header_box">
        <div class="header">
          <ul class="app-header">
            <li class="app-header-menuicon">
              <i class="layui-icon layui-icon-more-vertical"></i>
            </li>
          </ul>
          <h1 class="logo">
            <a href="#" style="font-size:20px">集训展示系统</a>
          </h1>
          <div class="nav" style="visibility: visible">

            <a href="about.html">关于</a>
          </div>
          <ul class="layui-nav header-down-nav">

            <li class="layui-nav-item"><a href="#">关于</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- Head End -->

  <!-- Carousel -->
  <div class="layui-row">
    <div class="layui-col-sm12 layui-col-md12">
      <div class="layui-carousel zyl_login_height" id="zyllogin" lay-filter="zyllogin">
        <div carousel-item="">
          <div>
            <div class="zyl_login_cont"></div>
          </div>
          <div>
            <div class="background">
              <span></span><span></span><span></span>
              <span></span><span></span><span></span>
              <span></span><span></span><span></span>
              <span></span><span></span><span></span>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
  <!-- Carousel End -->

  <!-- Footer -->
  <div class="layui-row">
    <div class="layui-col-sm12 layui-col-md12 zyl_center zyl_mar_01">

    </div>
  </div>
  <!-- Footer End -->



  <!-- LoginForm -->
  <div class="zyl_lofo_main">
    <fieldset class="layui-elem-field layui-field-title zyl_mar_02" style="text-align:center">
      <legend style=' margin-left:0'>欢迎登陆</legend>
    </fieldset>
    <div class="layui-row layui-col-space15">
      <form class="layui-form zyl_pad_01">
        <div class="layui-col-sm12 layui-col-md12">
          <div class="layui-form-item">
            <input type="text" name="username" lay-verify="required|userName" autocomplete="off" placeholder="账号"
              class="layui-input">
            <i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
          </div>
        </div>
        <div class="layui-col-sm12 layui-col-md12">
          <div class="layui-form-item">
            <input type="password" name="password" lay-verify="required|pass" autocomplete="off" placeholder="密码"
              class="layui-input">
            <i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
          </div>
        </div>
        <div class="layui-col-sm12 layui-col-md12">
          <div class="layui-row">
            <br />
            <br />

            <!-- 							<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
								<div class="layui-form-item">
									<input type="text" name="vercode" id="vercode" lay-verify="required|vercodes" autocomplete="off" placeholder="验证码" class="layui-input" maxlength="4">
									<i class="layui-icon layui-icon-vercode zyl_lofo_icon"></i>
								</div>
							</div>
							<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
								<div class="zyl_lofo_vercode zylVerCode" onclick="zylVerCode()"></div>
							</div> -->
          </div>
        </div>
        <div class="layui-col-sm12 layui-col-md12">
          <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login-submit">立即登录</button>
        </div>
      </form>
    </div>
  </div>
  <!-- LoginForm End -->

</div>



<script>
  layui.use(['carousel', 'form', 'admin', 'jparticle'], function () {
    var carousel = layui.carousel,
      admin = layui.admin,
      setter = layui.setter;
    $ = layui.$
      , form = layui.form;

    //自定义验证规则
    form.verify({
      userName: function (value) {
        if (value.length < 5) {
          return '账号至少得5个字符';
        }
      }
      , pass: [/^[\S]{1,12}$/, '密码必须6到12位，且不能出现空格']
      , vercodes: function (value) {
        //获取验证码
        var zylVerCode = $(".zylVerCode").html();
        if (value != zylVerCode) {
          return '验证码错误（区分大小写）';
        }
      }
      , content: function (value) {
        layedit.sync(editIndex);
      }
    });

    //监听提交
    form.on('submit(login-submit)', function (obj) {

      field = obj.field
      postData = { "userName": field.username, "password": field.password }

      admin.req({
        url: '/Identity/Login/LoginByUserNameAndPwd', // 实际使用请改成服务端真实接口
        type: 'post',
        data: JSON.stringify(postData),
        contentType: 'application/json',
        done: function (res) {

          // 请求成功后，写入 access_token
          layui.data(setter.tableName, {
            key: setter.request.tokenName,
            value: "Bearer " + res.data
          });

          // 给基础组件同步预设 token 值
          admin.setComponentsToken();


          if (!res.isSuccess) {
            //view.exit();
            layer.msg((res.msg || '操作失败'), {
              offset: '15px',
              icon: 1,
              time: 1000
            });
            return
          } else {
            // 登入成功的提示与跳转
            layer.msg('登录成功', {
              offset: '15px',
              icon: 1,
              time: 1000
            }, function () {
              //location.hash = search.redirect ? decodeURIComponent(search.redirect) : '/';
              location.hash = "/";
              // window.location.href = '../f/#/game/gameList';
            });
          }
        }
      });

      return false;
    });

    $(document).ready(function () {
      //设置轮播主体高度
      setTimeout(function () {
        var zyl_login_height = $(window).height() / 1.3;
        $(".zyl_login_height").css("height", zyl_login_height + "px");
        //Login轮播主体
        carousel.render({
          elem: '#zyllogin'//指向容器选择器
          , width: '100%' //设置容器宽度
          , height: 'zyl_car_height'
          , arrow: 'always' //始终显示箭头
          , anim: 'fade' //切换动画方式
          , autoplay: true //是否自动切换false true
          , arrow: 'hover' //切换箭头默认显示状态||不显示：none||悬停显示：hover||始终显示：always
          , indicator: 'none' //指示器位置||外部：outside||内部：inside||不显示：none
          , interval: '5000' //自动切换时间:单位：ms（毫秒）
        });

        //粒子线条
        $(".zyl_login_cont").jParticle({
          background: "rgba(0,0,0,0)",//背景颜色
          color: "#fff",//粒子和连线的颜色
          particlesNumber: 100,//粒子数量
          //disableLinks:true,//禁止粒子间连线
          //disableMouse:true,//禁止粒子间连线(鼠标)
          particle: {
            minSize: 1,//最小粒子
            maxSize: 3,//最大粒子
            speed: 30,//粒子的动画速度
          }
        });
      }, 100);



    });
  });

</script>